<template>
  <el-dialog
    ref="dialog"
    close-on-click-modal
    custom-class="kb-dialog"
    :show-close="false"
    title="知识库列表"
    :visible.sync="visible"
    width="300px"
  >
    <div slot="title">
      <div class="dialog-header">
        <div class="top">
          <div style="font-size: 14px">知识库列表</div>
          <el-button icon="el-icon-refresh" size="mini" style="margin-left: 10px" type="text" />
        </div>
        <el-input v-model="keyword" placeholder="请输入内容" prefix-icon="el-icon-search" @input="search" />
      </div>
    </div>

    <div class="ex-kb-list">
      <el-radio-group v-model="selectKb" @input="confirm">
        <el-radio v-for="item in filteredList" :key="item.id" :label="item.id">{{ item.name }}</el-radio>
      </el-radio-group>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: 'KbDialog',
    data() {
      return {
        keyword: '',
        selectKb: '',
        visible: false,
        kbList: [
          { name: '《中国制造2020》', id: 'asd' },
          { name: '《中国制造2021》', id: 'fds' },
          { name: '《中国制造2022》', id: 'bgt' },
          { name: '《中国制造2023》', id: 'qml' },
          { name: '《中国制造2024》', id: 'mjy' },
          { name: '《中国制造2025》', id: 'lko' },
          { name: '《人工智能蓝皮书》', id: 'sdg' },
          { name: '《人工智能蓝皮书》', id: 'fwe' },
          { name: '《人工智能蓝皮书》', id: 'gfd' },
          { name: '《人工智能蓝皮书》', id: 'jyt' },
          { name: '《人工智能蓝皮书》', id: 'kuj' },
          { name: '《人工智能蓝皮书》', id: 'lop' },
          { name: '《人工智能蓝皮书》', id: 'mjk' },
          { name: '《人工智能蓝皮书》', id: 'vvf' },
        ],
        filteredList: [],
      }
    },
    created() {
      this.filteredList = [...this.kbList]
    },
    methods: {
      showDialog() {
        this.visible = true
      },
      hideDialog() {
        this.selectKb = ''
        this.keyword = ''
        this.visible = false
      },
      confirm() {
        console.log(this.selectKb)
        this.$emit('confirm-kb', this.selectKb)
        this.hideDialog()
      },
      search() {
        this.filteredList = this.kbList.filter((_) => {
          return _.name.includes(this.keyword)
        })
      },
    },
  }
</script>

<style scoped lang="scss">
  ::v-deep .el-dialog.kb-dialog {
    .el-dialog__header {
      padding: 15px 15px 0;
      font-size: 14px;
    }
    .dialog-header {
      .top {
        display: flex;
        align-items: center;
      }
    }
    .el-dialog__body {
      border-top: none;
      padding: 15px;
      font-size: 14px;
      .ex-kb-list {
        max-height: 300px;
        overflow-y: auto;
      }
      .el-radio-group {
        display: flex;
        flex-direction: column;
        .el-radio {
          margin: 0 0 20px;
          display: flex;
          align-items: center;
          .el-radio__input {
            display: none;
          }
          .el-radio__label {
            font-size: 14px;
            white-space: break-spaces;
            padding-left: 0;
          }
        }
      }
    }
    .el-dialog__footer {
      border-top: none;
      padding: 0 10px 10px;
    }
  }
</style>
